<template>
  <div style="background-color: #eee;">
    <!-- 导航栏 -->
    <van-sticky>
      <van-nav-bar title="评价" left-arrow @click-left="onClickLeft" />
    </van-sticky>
     <!-- 综合评分 -->
    <div class="appraise-top">
      <div>
        <span>综合评分</span>
        <van-rate v-model="value" :size="14" color="#ffd21e" void-icon="star" void-color="#eee" />
      </div>
      <span>99.1%好评</span>
    </div>

    <!-- 评价卡片 -->
    <Pingjia v-for="i in 3"></Pingjia>

  </div>
</template>

<script>
import Pinjia from '@/components/pingjia.vue';

export default {
    data() {
        return {
            value: 5
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        }
    },
    components: { Pinjia }
}
</script>

<style lang="scss" scoped>
.appraise-top {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
  background-color: white;

  >div>span {
    margin-right: 10px;
  }

  >span {
    color: red;
  }
}

</style>